<template>
  <div class="detail">
    <div class="box1">
    <div class="d_left">
        <div class="pic-box" style="width:2.5rem;height:2.8rem; position:relative;left:.4rem;border:1px solid lightgray;">
            <span ref="img1" style="border:'1px solid red'"><img-zoom :src="require('../../assets/images/carousel1.png')" alt="12" width="250" height="280" :bigsrc="require('../../assets/images/carousel1.png')" :configs="configs"  ></img-zoom></span>
            <span ref="img2" style="display:none"><img-zoom :src="require('../../assets/images/carousel2.png')" alt="12" width="250" height="280" :bigsrc="require('../../assets/images/carousel2.png')" :configs="configs" ></img-zoom></span>
            <span ref="img3" style="display:none"><img-zoom :src="require('../../assets/images/carousel3.png')" alt="12" width="250" height="280" :bigsrc="require('../../assets/images/carousel3.png')" :configs="configs" ></img-zoom></span>
            <span ref="img4" style="display:none"><img-zoom :src="require('../../assets/images/carousel2.png')" alt="12" width="250" height="280" :bigsrc="require('../../assets/images/carousel2.png')" :configs="configs" ></img-zoom></span>

        </div>
        <div class="small_show" >
            <ul>
                <li ref="num" v-for="(item, index) in smalls" :key="index" :class="{active:index == isactive}">
                    <img :src="item.img" @click="adds(index)" ref="son"/>
                </li>
            </ul>
        </div>
    </div>
    <div class="d_right">
      <div class="title">
        <span>新生儿疾病筛查型</span>
        <h6>Neonatal screening type</h6><br/>
        <p class="p1">商品编码 ：{{productId}}</p>
        <p class="p2">商品型号 ：{{marque}}</p>
        <p class="p3">起订量&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;：100</p>
        <p class="p4">服务&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  ：由里定负责发货，并提供售后服务</p>
      </div>
      <div class="elect">
        <!-- 采血孔： -->
        <div class="hole-item" >
          <div class="cai xie">采血孔&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;：</div>
          <div class="elent_son">
          <el-row >
            <el-button v-model="holeId" class="kong" v-for="(item, index) of hole" :key="index.holeId" :value="index.holeId" :class="{active:index == isgood}">
              <span @click="holess(index, item.title)" >
                  {{item.title}}
                  </span>
            </el-button>
          </el-row>
          </div>
        </div>
        <!-- 尺寸 -->
        <div class="hole-item">
          <div class="cai cun">尺寸&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;：</div>
          <div class="elent_son sales">
          <el-row >
            <el-button v-model="salesId" class="kong"  v-for="(item, index) of sales" :key="index.salesId" :value="index.salesId" :class="{active:index == isbig}">
              <span @click="saless(index, item.sl)" >
                  {{item.sl}}
                  </span>
            </el-button>
          </el-row>
          </div>
        </div>
        <!-- 颜色 -->
        <div class="hole-item">
          <div class="cai se">颜色&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;：</div>
          <div class="elent_son red">
          <el-row >
            <el-button v-model="colorsId" class="kong"  v-for="(item, index) of colors" :key="index.colorsId" :value="index.colorsId" :class="{active:index == isred}">
              <span @click="colorss(index, item.co)" >
                  {{item.co}}
                  </span>
            </el-button>
          </el-row>
          </div>
        </div>
      </div>
      <div class="amount">
          <span>购买数量 &nbsp;：</span>
          <el-input-number class="purchase" v-model="num" @change="handleChange" :min="100"  label="描述文字"></el-input-number>
      </div>
      <div class="jsons">
        <top-bar :headline="headline" :hideShare="false" jump="/cart">
          <button @click="carts" slot="good" class="good" ><img src="../../assets/images/icon_cart_reverse.png"><span>加入购物车</span></button>
        </top-bar>
      </div>
    </div>
  </div>
  <v-footer style="position:relative; top:.5rem;"></v-footer>
</div>
</template>

<script>
import imgZoom from 'vue2.0-zoom'
import topBar from '../topbar'
import {setClassInfo} from '../../service/api'
import footer from '../footer'
export default {
  data () {
    return {
      headline: '加入购物车',
      marque: '153248546',
      productId: '0001',
      isactive: false,
      isgood: false,
      isbig: false,
      isred: false,
      holeId: '',
      salesId: '',
      colorsId: '',
      num: 100,
      configs: {
        width: 320,
        height: 300,
        maskWidth: 100,
        maskHeight: 100,
        maskColor: 'red',
        maskOpacity: 0.2
      },
      smalls: [
        {
          img: require('../../assets/images/carousel1.png')
        },
        {
          img: require('../../assets/images/carousel2.png')
        },
        {
          img: require('../../assets/images/carousel3.png')
        },
        {
          img: require('../../assets/images/carousel1.png')
        }
      ],
      hole: [
        {
          title: '无孔'
        },
        {
          title: '二孔'
        },
        {
          title: '三孔'
        },
        {
          title: '四孔'
        },
        {
          title: '五孔'
        }
      ],
      sales: [
        {
          sl: '65mm'
        },
        {
          sl: '70mm'
        },
        {
          sl: '74mm'
        },
        {
          sl: '75mm'
        },
        {
          sl: '80mm'
        },
        {
          sl: '85mm'
        },
        {
          sl: '90mm'
        },
        {
          sl: '105mm'
        },
        {
          sl: '50mm'
        },
        {
          sl: '97mm'
        }
      ],
      colors: [
        {
          co: '白色'
        },
        {
          co: '黄色'
        },
        {
          co: '红色'
        },
        {
          co: '绿色'
        },
        {
          co: '蓝色'
        }
      ]
    }
  },
  methods: {
    handleChange (value) {
      console.log(value)
    },
    holess (index, title) {
      this.isgood = index
      console.log('item', title)
      console.log('holes', this.isgood)
    },
    saless (index, sl) {
      this.isbig = index
      console.log('sl', sl)
      console.log('saless', this.isbig)
    },
    colorss (index, co) {
      this.isred = index
      console.log('co', co)
      console.log('coloes', this.isred)
    },
    adds (index) {
      this.isactive = index

      if (this.isactive === 0) {
        this.$refs.img1.style.display = 'block'
        this.$refs.img2.style.display = 'none'
        this.$refs.img3.style.display = 'none'
        this.$refs.img4.style.display = 'none'
      } else if (this.isactive === 1) {
        this.$refs.img2.style.display = 'block'
        this.$refs.img1.style.display = 'none'
        this.$refs.img3.style.display = 'none'
        this.$refs.img4.style.display = 'none'
      } else if (this.isactive === 2) {
        this.$refs.img3.style.display = 'block'
        this.$refs.img1.style.display = 'none'
        this.$refs.img2.style.display = 'none'
        this.$refs.img4.style.display = 'none'
      } else {
        this.$refs.img4.style.display = 'block'
        this.$refs.img1.style.display = 'none'
        this.$refs.img2.style.display = 'none'
        this.$refs.img3.style.display = 'none'
      }
      console.log('isa', this.isactive)
    },
    carts () {
      if (!this.holeId || !this.salesId || !this.colorsId || !this.num) {
        this.$message({
          message: '请选择完整内容',
          duration: 1000
        })
      }
      setClassInfo(this.holeId, this.salesId, this.colorsId, this.num).then(d => {
        if (d.code === 200) {
          this.$message({
            message: '添加成功',
            iconClass: 'icon-hide',
            duration: 1000,

            onClose: () => {
              this.$store.dispatch('getMyPreofile')
              this.$router.push('/cart')
            }
          })
        }
      })
    }
  },
  components: {
    imgZoom,
    topBar,
    'v-footer': footer
  }
}
</script>

<style scoped lang="less">
@import "../../assets/less/detail.less";
</style>
